<template>
	<view v-if="componentData.type != 4">
		<view v-if="couponList.length" class="home-coupon component-diy" :style="marginStyle">
			<block v-for='(item, index) in couponList' :key="index" v-if='couponList.length > 0 && update'>
				<view class="home-coupon-item">
					<i class="iconfont icon-coupon" :style="backgroundColor"></i>
					<block>
						<view class="home-coupon-con" @tap="toCouponDetail(item.id,item.use)">
							<view class="home-coupon-left">
								<text :style="Textcolor">￥</text>
								<text :style="Textcolor" v-if="item.reduce_money">{{item.reduce_money}}</text>
								<text :style="Textcolor" v-else>{{item.coupon_amount}}</text>
							</view>
							<view class="home-coupon-right" :class="{chrome: chrome}">
								<text :style="Textcolor" v-if="item.coupon_name">{{item.coupon_name}}</text>
								<text :style="Textcolor" v-else>{{item.stock_name}}</text>
								<text :style="Textcolor" v-if="item.need_money && item.reduce_money">满{{item.need_money}}减{{item.reduce_money}}</text>
								<text :style="Textcolor" v-else>满{{item.transaction_minimum}}减{{item.coupon_amount}}</text>
								<text :style="Textcolor" v-if="item.begin_time && item.end_time">{{item.begin_time}}-{{item.end_time}}</text>
								<text :style="Textcolor" v-else>{{item.time}}</text>
								<!-- 商家券 -->
								<template v-if="componentData.type==2">
									<template v-if='!item.use'>
										<!-- #ifdef MP-WEIXIN -->
										<block
											v-if="(service_status == 2 && item.user_type == 2) || (item.user_type == 1 && item.type == 2  && ordinary_status  == 1)">
											<view class="home-coupon-btn" @tap="showAccount(item.user_type)">领取</view>
										</block>
										<view @click.stop="getcouponid(item)" v-else>
											<send-coupon @customevent="getCoupons" :send_coupon_params="item.send_coupon_param" :sign="item.sign"
												:send_coupon_merchant="item.send_coupon_merchant">
												<view class="home-coupon-btn" :class="{chrome: chrome}" :style="receiveButtonColor">领取</view>
											</send-coupon>
										</view>
										<!-- #endif -->
										<!-- #ifdef H5 -->
										<view class="home-coupon-btn" :class="{chrome: chrome}" :style="receiveButtonColor">
											领取</view>
										<!-- #endif -->

									</template>
									<template v-else>
										<view class="home-coupon-btn home-coupon-btn-disable" :class="{chrome: chrome}" :style="receiveButtonColor">已领取</view>
									</template>
								</template>
								<!-- 代金券 -->
								<template v-else-if="componentData.type==3">
									<block v-if='!item.use'>
										<view
											v-if="(service_status == 2 && item.user_type == 2) || (item.user_type == 1 && item.type == 2  && ordinary_status  == 1)">
											<view class="home-coupon-btn" @click.stop="showAccount(item.user_type)">领取
											</view>
										</view>
										<view v-else class="home-coupon-btn" :class="{chrome: chrome}" @click.stop="receiveCoupon(index)"
											:style="receiveButtonColor">领取</view>
									</block>
									<block v-else>
										<view class="home-coupon-btn home-coupon-btn-disable" :class="{chrome: chrome}" :style="receiveButtonColor">已领取</view>
									</block>
								</template>
								<!-- 优惠券 -->
								<template v-else>
									<block v-if='!item.use'>
										<view class="home-coupon-btn" :class="{chrome: chrome}" @click.stop="receiveCoupon(index)" :style="receiveButtonColor">
											领取</view>
									</block>
									<block v-else>
										<view class="home-coupon-btn home-coupon-btn-disable" :class="{chrome: chrome}" :style="receiveButtonColor">已领取</view>
									</block>
								</template>

							</view>
						</view>
					</block>

				</view>
			</block>
			<view class="home-coupon-more" v-if='couponList.length == 3'>
				<view @click="coupon">
					<uni-icons type="back" size="12" :color="moreIconColor"></uni-icons>
					<text class="more" :style="moreColor">查看更多</text>
				</view>
			</view>
		</view>
	</view>

	<view v-else>
		<!-- #ifdef H5 -->
		<view class="text-center">支付宝支付券具体样式请以支付宝官方样式为准</view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<mkt v-if="canIUse && cityCode" mode="AUTOMATIC" boothCode="MERCHANT_SELF_TINYAPP" :cityCode="cityCode" version="2"></mkt>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		props: [
			'componentData',
			//#ifdef MP-ALIPAY
			'cityCode', //用户城市编码
			//#endif
			'service_status',
			'ordinary_status',
		],
		data() {
			return {
				couponList: [],
				chrome: false,
				couponId: '',
				update: true, //强制刷新页面
				webURL: '',
				//#ifdef MP-ALIPAY
				canIUse: my.canIUse('mkt'),
				//#endif
			}
		},
		computed: {
			marginStyle() {
				let css = {
					'margin': '5px 0',
					'padding': 0,
					'margin-top': this.componentData.marginTop + 'px',
					'margin-bottom': this.componentData.marginBottom + 'px',
				}
				return this.$joinStyle(css);
			},
			backgroundColor() {
				return this.color('backgroundColor');
			},
			Textcolor() {
				return this.color('color');
			},
			receiveButtonColor() {
				let receive = [];
				receive.push(this.color('receiveButtonColor'));
				receive.push(this.getBackgroundColor('receiveButtonBackgroundColor'));
				return receive.join(';');
			},
			moreIconColor() {
				return this.componentData['moreColor'];
			},
			moreColor() {
				return this.color('moreColor');
			}
		},
		mounted() {
			// #ifdef MP-ALIPAY
			if (this.componentData.type == 1) {
				this.getCoupon();
			}
			// #endif

			// #ifdef MP-WEIXIN
			this.getCoupon();
			// #endif
		},
		methods: {
			//跳转公众号
			showAccount(type) {
				var userInfo = getApp().globalData.XcxData.userInfo;
				let uid = userInfo.uid;
				let backPage = getCurrentPages();
				let page = (backPage[backPage.length - 1]).route.toString()
				getApp().globalData.XcxData.isvEntryVoucher = true
				uni.navigateTo({
					url: '../../pages/index/web/web?url=' + this.webURL + '&uid=' + uid + '&page=' + page +
						'&user_type=' + type
				})
			},
			async getCoupon() {
				const res = await this.$request('SmallProgramApi/Coupon/getSomeCoupon', {
					couponType: this.componentData['type'] ? this.componentData['type'] : 1
				});
				if (res.status == 1) {
					if (this.componentData['type'] == 1) {
						this.couponList = res.data
					} else if (this.componentData['type'] == 2) {
						this.couponList = res.shop_coupon
						this.webURL = res.web_url
					} else if (this.componentData['type'] == 3) {
						this.couponList = res.pay_coupon;
						this.webURL = res.web_url
						this.couponList.forEach(function(item, index) {
							item.use = false
						})
					}
				}
			},
			color(type) {
				const css = {
					'color': this.componentData[type]
				};
				return this.$joinStyle(css);
			},
			getBackgroundColor(type) {
				const css = {
					'background-color': this.componentData[type]
				};
				return this.$joinStyle(css);
			},
			//领取优惠券
			async receiveCoupon(index) {
				let couponType = this.componentData['type'] ? this.componentData['type'] : 1;
				let data = couponType == 1 ? {
					coupon_id: this.couponList[index].id,
					couponType: couponType
				} : {
					id: this.couponList[index].id
				};
				let url = couponType == 1 ? 'SmallProgramApi/Coupon/collar' : 'SmallProgramApi/PayCoupon/receiveCoupon'
				const res = await this.$request(url, data);
				if (res.status == 1) {
					uni.showToast({
						title: '领取成功',
						// #ifndef MP-ALIPAY
						duration: 1000,
						// #endif
						mask: false,
					})
					this.$set(this.couponList[index], 'use', true);
					this.$forceUpdate()
					this.update = true;
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})
				}
			},
			//跳转领券中心
			coupon: function() {
				let genre = this.componentData.type == 2 ? 3 : this.componentData.type == 3 ? 4 : 1;
				uni.navigateTo({
					url: '../index/Coupon/Coupon?genre=' + genre
				})
			},
			//跳转商家券或代金券详情
			toCouponDetail(id, isget) {
				let genre = this.componentData.type == 2 ? 3 : this.componentData.type == 3 ? 4 : '';
				if (this.componentData.type != 1) {
					uni.navigateTo({
						url: "../index/merCouponDetail/merCouponDetail?id=" + id + '&type=1' + '&isget=' + isget +
							'&genre=' + genre
					})
				}
			},
			//拿到商家券id
			getcouponid(item) {
				this.couponId = item.id
			},
			async getCoupons(params) {
				if (params.detail.send_coupon_result[0].code == "SUCCESS") {
					const res = await this.$request('SmallProgramApi/ShopCoupon/receiveCouponCallback', {
						coupon_id: this.couponId,
						stock_id: params.detail.send_coupon_result[0].stock_id,
						coupon_code: params.detail.send_coupon_result[0].coupon_code,
					})
					if (res.status == 1) {
						uni.showToast({
							title: '领取成功',
							// #ifndef MP-ALIPAY
							duration: 2000,
							// #endif
						});
						this.couponList.forEach((item, index) => {
							if (item.id == this.couponId) {
								item.use = true
							}
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							// #ifndef MP-ALIPAY
							duration: 2000,
							// #endif
						})
					}
				} else {
					uni.showToast({
						title: params.detail.send_coupon_result[0].message,
						icon: 'none',
						// #ifdef MP-ALIPAY
						duration: 2000,
						// #endif
					});
				}
			},
		}
	}
</script>

<style lang="less">
	/* #ifdef H5 */
	// @font-face {
	// 	font-family: 'iconfont';
	// 	src: url('~@/static/iconfont/iconfont.eot');
	// 	src: url('~@/static/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
	// 		url('~@/static/iconfont/iconfont.woff2') format('woff2'),
	// 		url('~@/static/iconfont/iconfont.woff') format('woff'),
	// 		url('~@/static/iconfont/iconfont.ttf') format('truetype'),
	// 		url('~@/static/iconfont/iconfont.svg#iconfont') format('svg');
	// }

	// .iconfont {
	// 	font-family: "iconfont" !important;
	// 	font-size: 16px;
	// 	font-style: normal;
	// 	-webkit-font-smoothing: antialiased;
	// 	-moz-osx-font-smoothing: grayscale;
	// }

	// .icon-dingwei:before {
	// 	content: "\e63e";
	// }

	// .icon-arrow-down-s-fill:before {
	// 	content: "\e72b";
	// }

	// .icon-un-scan-o:before {
	// 	content: "\e6be";
	// }

	// .icon-search:before {
	// 	content: "\e626";
	// }

	// .icon-erweima:before {
	// 	content: "\e71e";
	// }


	.home-coupon {
		height: 56px;
		padding: 5px 0;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		overflow-x: auto;

		&::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
			display: none;
		}

		scrollbar-width: none;
	}

	.home-coupon-item {
		display: inline-block;
		vertical-align: top;
		align-items: center;
		position: relative;
		width: 190px;
		height: 100%;
		margin: 0 6px;
	}

	.home-coupon-item:nth-child(1) {
		margin-left: 15px;
	}

	.home-coupon-item:nth-last-child(1) {
		margin-right: 15px;
	}

	.home-coupon-item>i {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 52px;
	}

	.home-coupon-con {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		position: relative;
	}

	.home-coupon-left {
		width: 58px;
		display: flex;
		align-items: flex-end;
		color: white;
		justify-content: center;
	}

	.home-coupon-left>text:nth-child(1) {
		font-size: 11px;
		line-height: 11px;
		padding-bottom: 1px;
	}

	.home-coupon-left>text:nth-child(2) {
		font-size: 16px;
		line-height: 16px;
		font-weight: bold;
	}

	.home-coupon-right {
		width: 132px;
		display: flex;
		flex-direction: column;
		position: relative;
		color: white;
		height: 100%;
		padding: 8px;
		box-sizing: border-box;
		justify-content: space-between;

		&.chrome>text {
			transform: scale(0.8);
			width: 0;
		}
	}

	.home-coupon-right>text:nth-child(1) {
		font-size: 10px;
		letter-spacing: 1px;
	}

	.home-coupon-right>text:nth-child(2) {
		font-size: 8px;
		letter-spacing: 1px;
	}

	.home-coupon-right>text:nth-child(3) {
		font-size: 8px;
	}

	.home-coupon-btn {
		width: 31px;
		height: 14px;
		background-color: white;
		border-radius: 7.5px;
		line-height: 14px;
		text-align: center;
		color: #ff5c6d;
		position: absolute;
		right: 10px;
		top: 19px;
		font-size: 8px;

		&.chrome {
			transform: scale(0.8);
		}
	}

	.home-coupon-btn-disable {
		background-color: #f5f5f5;
		color: #aaa;
	}

	.home-coupon-more {
		display: inline-block;
		vertical-align: top;
		width: 25px;
		height: 100%;
		margin-right: 15px;
	}

	.home-coupon-more>view {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.home-coupon-more>view>text.more {
		font-size: 10px;
		color: #aaa;
		display: block;
		width: 11px;
		height: 100%;
		white-space: pre-wrap;
		line-height: 13px;
		margin-left: 6px;
	}

	.home-coupon-more>view>.uni-icons {
		color: #AAA;
	}

	.text-center {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		font-size: 14px;
		background: #ffffff;
		box-sizing: border-box;
		border: 1px dashed #999999;
	}

	/* #endif */
	/* #ifndef H5 */
	.home-coupon {
		height: 112rpx;
		padding: 10rpx 0;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		overflow-x: auto;
	}

	.home-coupon-item {
		display: inline-block;
		vertical-align: top;
		align-items: center;
		position: relative;
		width: 380rpx;
		height: 100%;
		margin: 0 12rpx;
	}

	.home-coupon-item:nth-child(1) {
		margin-left: 30rpx;
	}

	.home-coupon-item:nth-last-child(1) {
		margin-right: 30rpx;
	}

	.home-coupon-item>i {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 104rpx;
	}

	.home-coupon-con {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		position: relative;
	}

	.home-coupon-left {
		width: 116rpx;
		display: flex;
		align-items: flex-end;
		color: white;
		justify-content: center;
	}

	.home-coupon-left>text:nth-child(1) {
		font-size: 22rpx;
		line-height: 22rpx;
		padding-bottom: 2rpx;
	}

	.home-coupon-left>text:nth-child(2) {
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: bold;
	}

	.home-coupon-right {
		width: 264rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		color: white;
		height: 100%;
		padding: 16rpx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.home-coupon-right>text:nth-child(1) {
		font-size: 20rpx;
		letter-spacing: 2rpx;
	}

	.home-coupon-right>text:nth-child(2) {
		font-size: 16rpx;
		letter-spacing: 2rpx;
	}

	.home-coupon-right>text:nth-child(3) {
		font-size: 16rpx;
	}

	.home-coupon-btn {
		width: 62rpx;
		height: 28rpx;
		background-color: white;
		border-radius: 15rpx;
		line-height: 28rpx;
		text-align: center;
		color: #ff5c6d;
		position: absolute;
		right: 20rpx;
		top: 38rpx;
		font-size: 16rpx;
	}

	.home-coupon-btn-disable {
		background-color: #f5f5f5;
		color: #aaa;
	}

	.home-coupon-more {
		display: inline-block;
		vertical-align: top;
		width: 50rpx;
		height: 100%;
		margin-right: 30rpx;
	}

	.home-coupon-more>view {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.home-coupon-more>view>text {
		font-size: 20rpx;
		color: #aaa;
		display: block;
		width: 22rpx;
		height: 100%;
		white-space: pre-wrap;
		line-height: 26rpx;
		margin-left: 12rpx;
	}

	.home-coupon-more>view>image {
		width: 14rpx;
		height: 20rpx;
	}

	/* #endif */
</style>
